<div class="l-title-group">
    <h4 class="l-title-text">Data Source</h4>
    <div class="l-icon-wrapper">
        <ng-container *ngIf="chartConfig">
            <pp-agent-data-source-chart-select-source
                [data]="sourceListForFilter"
                (outCheckedIdChange)="onCheckedIdChange($event)">
            </pp-agent-data-source-chart-select-source>
        </ng-container>
        <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
    </div>
</div>
<div class="l-chart-area-wrapper">
    <pp-loading [showLoading]="isActiveLayer('loading')" [zIndex]="10"></pp-loading>
    <pp-retry [showRetry]="isActiveLayer('retry')" [message]="retryMessage" (outRetry)="onRetry()"></pp-retry>
    <pp-inspector-chart
        [ngClass]="chartVisibility"
        [chartConfig]="chartConfig"
        (outRendered)="onRendered()"
        (mousemove)="onMouseMove($event)">
    </pp-inspector-chart>
</div>
<ng-container *ngIf="chartConfig && !isDataEmpty">
    <pp-agent-data-source-chart-infotable
        [infoTableObj]="infoTableObj">
    </pp-agent-data-source-chart-infotable>
</ng-container>
